/**
 * @class Ext.dataview.SimpleListItem
 */

// ************************************** IMPORTANT **************************************
//
// PLEASE READ THIS BEFORE MODIFYING ANYTHING IN THIS FILE
//
// The variables and mixins defined in this file apply to both Ext.dataview.ListItem
// and Ext.dataview.SimpleListItem.  Both classes use similar dom structure and class names
// so that they can share all styling.
//
// To ensure that documentation for these variables appears under both classes in the
// generated docs, documentation for all variables is repeated in ListItem.scss.
//
// When adding or removing variables in this file - please remember to document them
// over in ListItem.scss as well.
//
// ************************************** IMPORTANT **************************************

//# fashion replaces $list-item-color
/**
 * @var {color}
 * ListItem text color
 */
$listitem-color: dynamic($dataitem-color);

/**
 * @var {color}
 * ListItem text color when hovered
 */
$listitem-hovered-color: dynamic($dataitem-hovered-color);

/**
 * @var {color}
 * ListItem text color when selected
 */
$listitem-selected-color: dynamic($dataitem-selected-color);

/**
 * @var {color}
 * ListItem text color when pressed
 */
$listitem-pressed-color: dynamic($dataitem-pressed-color);

/**
 * @var {color}
 * ListItem text color when pinned
 */
$listitem-pinned-color: dynamic(null);

//# fashion replaces $list-item-background-color
/**
 * @var {color}
 * ListItem background-color
 */
$listitem-background-color: dynamic($dataitem-background-color);

/**
 * @var {color}
 * background-color for `striped` ListItems
 */
$listitem-alt-background-color: dynamic($dataitem-alt-background-color);

/**
 * @var {color}
 * ListItem background-color when hovered
 */
$listitem-hovered-background-color: dynamic($dataitem-hovered-background-color);

//# fashion replaces $list-item-selected-background-color
/**
 * @var {color}
 * ListItem background-color when selected
 */
$listitem-selected-background-color: dynamic($dataitem-selected-background-color);

//# fashion replaces $list-item-pressed-background-color
/**
 * @var {color}
 * ListItem background-color when pressed
 */
$listitem-pressed-background-color: dynamic($dataitem-pressed-background-color);

/**
 * @var {color}
 * ListItem background-color when pinned
 */
$listitem-pinned-background-color: dynamic(null);

/**
 * @var {number/list}
 * ListItem border-width
 */
$listitem-border-width: dynamic(1px 0);

/**
 * @var {string}
 * ListItem border-style
 */
$listitem-border-style: dynamic(solid);

//# fashion replaces $list-item-border-color
/**
 * @var {color}
 * ListItem border-color
 */
$listitem-border-color: dynamic($neutral-highlight-color);

/**
 * @var {color}
 * ListItem border-color when hovered
 */
$listitem-hovered-border-color: dynamic($listitem-hovered-background-color);

/**
 * @var {color}
 * ListItem border-color when selected
 */
$listitem-selected-border-color: dynamic($listitem-selected-background-color);

/**
 * @var {color}
 * ListItem border-color when pressed
 */
$listitem-pressed-border-color: dynamic($listitem-pressed-background-color);

/**
 * @var {color}
 * ListItem border-color when pinned
 */
$listitem-pinned-border-color: dynamic(null);

/**
 * @var {number}
 * ListItem outline-width when focused
 */
$listitem-focused-outline-width: dynamic($dataitem-focused-outline-width);

/**
 * @var {string}
 * ListItem outline-style when focused
 */
$listitem-focused-outline-style: dynamic($dataitem-focused-outline-style);

/**
 * @var {color}
 * ListItem outline-color when focused
 */
$listitem-focused-outline-color: dynamic($dataitem-focused-outline-color);

/**
 * @var {number}
 * ListItem outline-offset when focused
 */
$listitem-focused-outline-offset: dynamic($dataitem-focused-outline-offset);

/**
 * @var {list}
 * ListItem border-color when pinned
 */
$listitem-pinned-box-shadow: dynamic(0 2px 4px 0 rgba(0, 0, 0, .2));

/**
 * @var {list}
 * ListItem border-color when pinned to the bottom
 */
$listitem-pinned-bottom-box-shadow: dynamic(invert-shadow($listitem-pinned-box-shadow, y));

//# fashion replaces $list-item-font-weight
/**
 * @var {string/number}
 * ListItem font-weight
 */
$listitem-font-weight: dynamic($dataitem-font-weight);

//# fashion replaces $list-item-font-size
/**
 * @var {number}
 * ListItem font-size
 */
$listitem-font-size: dynamic($dataitem-font-size);

//# fashion replaces $list-item-font-size-big
/**
 * @var {number}
 * ListItem font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listitem-font-size-big: dynamic($dataitem-font-size-big);

/**
 * @var {number}
 * ListItem font-size when selected
 */
$listitem-selected-font-size: dynamic(null);

/**
 * @var {number}
 * ListItem font-size when selected in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listitem-selected-font-size-big: dynamic(null);

/**
 * @var {number}
 * ListItem font-size when pressed
 */
$listitem-pressed-font-size: dynamic(null);

/**
 * @var {number}
 * ListItem font-size when pressed in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listitem-pressed-font-size-big: dynamic(null);

//# fashion replaces $list-item-line-height
/**
 * @var {number}
 * ListItem line-height
 */
$listitem-line-height: dynamic($dataitem-line-height);

//# fashion replaces $list-item-line-height-big
/**
 * @var {number}
 * ListItem line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listitem-line-height-big: dynamic($dataitem-line-height-big);

//# fashion replaces $list-item-font-family
/**
 * @var {string}
 * ListItem font-family
 */
$listitem-font-family: dynamic($dataitem-font-family);

//# fashion replaces $list-item-padding
/**
 * @var {number/list}
 * ListItem padding
 */
$listitem-padding: dynamic(4px 8px);

//# fashion replaces $list-item-padding-big
/**
 * @var {number/list}
 * ListItem padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listitem-padding-big: dynamic(7px 15px);

/**
 * Creates a visual theme for a ListItem.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {String} [$xtype=listitem] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $color
 * ListItem text color
 *
 * @param {color} $hovered-color
 * ListItem text color when hovered
 *
 * @param {color} $selected-color
 * ListItem text color when selected
 *
 * @param {color} $pressed-color
 * ListItem text color when pressed
 *
 * @param {color} $pinned-color
 * ListItem text color when pinned
 *
 * @param {color} $background-color
 * ListItem background-color
 *
 * @param {color} $alt-background-color
 * background-color for `striped` ListItems
 *
 * @param {color} $hovered-background-color
 * ListItem background-color when hovered
 *
 * @param {color} $selected-background-color
 * ListItem background-color when selected
 *
 * @param {color} $pressed-background-color
 * ListItem background-color when pressed
 *
 * @param {color} $pinned-background-color
 * ListItem background-color when pinned
 *
 * @param {number/list} $border-width
 * ListItem border-width
 *
 * @param {string} $border-style
 * ListItem border-style
 *
 * @param {color} $border-color
 * ListItem border-color
 *
 * @param {color} $hovered-border-color
 * ListItem border-color when hovered
 *
 * @param {color} $selected-border-color
 * ListItem border-color when selected
 *
 * @param {color} $pressed-border-color
 * ListItem border-color when pressed
 *
 * @param {color} $pinned-border-color
 * ListItem border-color when pinned
 *
 * @param {number} $focused-outline-width
 * ListItem outline-width when focused
 *
 * @param {string} $focused-outline-style
 * ListItem outline-style when focused
 *
 * @param {color} $focused-outline-color
 * ListItem outline-color when focused
 *
 * @param {number} $focused-outline-offset
 * ListItem outline-offset when focused
 *
 * @param {list} $pinned-box-shadow
 * ListItem border-color when pinned
 *
 * @param {list} $pinned-bottom-box-shadow
 * ListItem border-color when pinned to the bottom
 *
 * @param {string/number} $font-weight
 * ListItem font-weight
 *
 * @param {number} $font-size
 * ListItem font-size
 *
 * @param {number} $font-size-big
 * ListItem font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $selected-font-size
 * ListItem font-size when selected
 *
 * @param {number} $selected-font-size-big
 * ListItem font-size when selected in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $pressed-font-size
 * ListItem font-size when pressed
 *
 * @param {number} $pressed-font-size-big
 * ListItem font-size when pressed in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $line-height
 * ListItem line-height
 *
 * @param {number} $line-height-big
 * ListItem line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * ListItem font-family
 *
 * @param {number/list} $padding
 * ListItem padding
 *
 * @param {number/list} $padding-big
 * ListItem padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin listitem-ui(
    $ui: null,
    $xtype: listitem,
    $color: null,
    $hovered-color: null,
    $selected-color: null,
    $pressed-color: null,
    $pinned-color: null,
    $background-color: null,
    $alt-background-color: null,
    $hovered-background-color: null,
    $selected-background-color: null,
    $pressed-background-color: null,
    $pinned-background-color: null,
    $border-width: null,
    $border-style: null,
    $border-color: null,
    $hovered-border-color: null,
    $selected-border-color: null,
    $pressed-border-color: null,
    $pinned-border-color: null,
    $focused-outline-width: null,
    $focused-outline-style: null,
    $focused-outline-color: null,
    $focused-outline-offset: null,
    $pinned-box-shadow: null,
    $pinned-bottom-box-shadow: null,
    $font-weight: null,
    $font-size: null,
    $font-size-big: null,
    $selected-font-size: null,
    $selected-font-size-big: null,
    $pressed-font-size: null,
    $pressed-font-size-big: null,
    $line-height: null,
    $line-height-big: null,
    $font-family: null,
    $padding: null,
    $padding-big: null
) {
    $ui-suffix: ui-suffix($ui);

    $arguments: intersect-arguments(listitem-ui, listitem-base);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        @include listitem-base($arguments...);

        @include font($font-weight, $font-size, $line-height, $font-family);

        &.#{$prefix}selected {
            font-size: $selected-font-size;
            @if $enable-big {
                .#{$prefix}big & {
                    font-size: $selected-font-size-big;
                }
            }
        }

        &.#{$prefix}pressed {
            font-size: $pressed-font-size;
            @if $enable-big {
                .#{$prefix}big & {
                    font-size: $pressed-font-size-big;
                }
            }
        }

        @if $enable-big {
            .#{$prefix}big & {
                font-size: $font-size-big;
                line-height: $line-height-big;
            }
        }

        &.#{$prefix}focused {
            .#{$prefix}keyboard-mode & {
                @include outline(
                    $width: $focused-outline-width,
                    $style: $focused-outline-style,
                    $color: $focused-outline-color,
                    $offset: $focused-outline-offset,
                    $border-width: $border-width
                );
            }
        }
    }

    @include toolable-ui(
        $ui: $ui,
        $xtype: $xtype,
        $padding: $padding,
        $padding-big: $padding-big,
        $anchor: inner-el
    );
}

/**
 * A private mixin that generates the styling common to the ListItem and GridRow ui mixins.
 * Do not call this mixin directly. Use {@link Ext.dataview.ListItem#listitem-ui listitem-ui}
 * or {@link Ext.grid.Row#$gridrow-ui gridrow-ui}.
 * @private
 */
@mixin listitem-base(
    $color: null,
    $hovered-color: null,
    $selected-color: null,
    $pressed-color: null,
    $pinned-color: null,
    $background-color: null,
    $alt-background-color: null,
    $hovered-background-color: null,
    $selected-background-color: null,
    $pressed-background-color: null,
    $pinned-background-color: null,
    $border-width: null,
    $border-style: null,
    $border-color: null,
    $hovered-border-color: null,
    $selected-border-color: null,
    $pressed-border-color: null,
    $pinned-border-color: null,
    $pinned-box-shadow: null,
    $pinned-bottom-box-shadow: null
) {
    color: $color;
    background-color: $background-color;
    @include border($border-width, $border-style, $border-color);
    margin-bottom: -(bottom($border-width));

    + .#{$prefix}scrolldock-end {
        margin-top: bottom($border-width)
    }

    &:first-child {
        // top border color is the same as background color when row is the first row
        // This avoids the appearance of a double border on the grid header container
        // when scrollTop == 0
        border-top-color: $background-color;
    }

    &.#{$prefix}odd {
        background-color: $alt-background-color;
    }

    &.#{$prefix}hovered {
        background-color: $hovered-background-color;
        color: $hovered-color;
        border-color: $hovered-border-color;
    }

    &.#{$prefix}selected {
        .#{$prefix}show-selection > & {
            background-color: $selected-background-color;
            color: $selected-color;
            border-color: $selected-border-color;
        }
    }

    &.#{$prefix}pressed {
        background-color: $pressed-background-color;
        color: $pressed-color;
        border-color: $pressed-border-color;
    }

    &.#{$prefix}pinned {
        background-color: $pinned-background-color;
        color: $pinned-color;
        border-color: $pinned-border-color;
        box-shadow: $pinned-box-shadow;
    }

    &.#{$prefix}pinned-bottom {
        box-shadow: $pinned-bottom-box-shadow;
    }
}

